<!DOCTYPE html>
<html>
<head>
    <title>支付</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords"
          content="Flat Dark Web Login Form Responsive Templates, Iphone Widget Template, Smartphone login forms,Login form, Widget Template, Responsive Templates, a Ipad 404 Templates, Flat Responsive Templates"/>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="../js/jsencrypt.min.js"></script>
    <script src="../js/jquery.params.js"></script>
    <script src="../js/api.js"></script>
    <style type="text/css">
        table.gridtable {
            font-family: verdana, arial, sans-serif;
            font-size: 11px;
            color: #333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
        }

        table.gridtable th {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
        }

        table.gridtable td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<h1>支付</h1>
<div class="login-form">
    <div class="close"></div>
    <div class="head-info">
        <label class="lbl-1"> </label>
        <label class="lbl-2"> </label>
        <label class="lbl-3"> </label>
    </div>
    <div class="clear"></div>
    <br/>
    订单id：
    <input id="order_id" type="text"/>
    <br/>
    订单编号：
    <input id="order_number" type="text"/>
    <br/>
    支付 金额：
    <input id="pay_amount" type="text"/>
    <br/>
    <hr/>
    <table class="gridtable">
        <tbody id="tbody1"></tbody>
    </table>
    <br/>
    <div class="signin">
        <button class="btn" onclick="pay()">支付宝支付</button>
        <button class="btn" onclick="precreate()">扫码当面付</button>
        <button class="btn" onclick="weixin()">微信支付</button>
    </div>
</div>
<div id="pay_f">

</div>
<script>

    $(function () {
        getData1();
    });

    function getData1() {
        var order_info = $.query.get("order_info");
        var obj = JSON.parse(order_info);
        $("#order_id").val(obj.data.orderId);
        $("#order_number").val(obj.data.orderNumber);
        $("#pay_amount").val(obj.data.payAmount);

        var data = obj.data;
        var tableData = "<tr><th>订单ID</th>" +
            "<th>订单编号</th>" +
            "<th>用户ID</th>" +
            "<th>订单状态</th>" +
            "<th>订单金额</th>" +
            "<th>支付金额</th>" +
            "<th>订单总金额</th>" +
            "<th>订单备注</th></tr>";
        //动态增加5个td,并且把data数组的五个值赋给每个td
        tableData += "<tr>";
        tableData += "<td>" + data.orderId + "</td>";
        tableData += "<td>" + data.orderNumber + "</td>";
        tableData += "<td>" + data.userId + "</td>";
        tableData += "<td>" + data.status + "</td>";
        tableData += "<td>" + data.orderAmount + "</td>";
        tableData += "<td>" + data.payAmount + "</td>";
        tableData += "<td>" + data.totalAmount + "</td>";
        tableData += "<td>" + data.remark + "</td>";
        tableData += "</tr>";
        //现在tableData已经生成好了，把他赋值给上面的tbody
        console.log(tableData);
        document.getElementById("tbody1").innerHTML = tableData;
        console.log(obj.data);
    }

    function pay() {

        var json = {
            "order_id": $("#order_id").val(),
            "pay_amount": $("#pay_amount").val(),
            "order_number": $("#order_number").val()
        };

        var params = JSON.stringify(json).replace(/:/g, "=").replace(/"/g, "").replace(/ /g, "");
        var data = request("alipay_pagePay", "", "0", json, params);
        console.log(data);
        $("#pay_f").html(data.form);
    }

    function precreate() {

        var json = {
            "order_id": $("#order_id").val(),
            "pay_amount": $("#pay_amount").val(),
            "order_number": $("#order_number").val()
        };

        var params = JSON.stringify(json).replace(/:/g, "=").replace(/"/g, "").replace(/ /g, "");
        var data = request("alipay_precreate", "", "0", json, params);

        console.log(data);
        window.location.href = "http://localhost:9090/rest/views/qr_code.html?qr_code=" + encodeURI(JSON.stringify(data));
    }
</script>
</body>
</html>